<template>
	<div class="factory-fabric table-theme">
		<head-title title="合作--工厂面料"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left"><el-button type="danger" @click="batchDel">批量删除</el-button></div>
				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view
                            :option="searchOption"
                            @value="goSearch"
                            @clear="refreshPage"
							v-if="!factory_id"
                        ></search-view>
					<div class="add"><el-button type="primary" @click="showDialog(0)">添加面料(单图)</el-button></div>
					<div class="add"><el-button type="primary" @click="showDialog(2)">添加面料(多图)</el-button></div>
				</div>
			</div>
			<p class="data-number">总面料数：{{ total }}</p>
			<el-table :data="fabricList" border class="factory-table" @selection-change="batchSelect">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column label="序号" align="center" prop="factory_id"></el-table-column>
				<el-table-column label="编号" align="center" prop="fabric_sn"></el-table-column>
				<el-table-column label="图片" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.image"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="分类" align="center">
					<template slot-scope="scope">{{scope.row.class_name}}</template>
				</el-table-column>
				<el-table-column label="排序" align="center" prop="">
					<template slot-scope="scope">
						<el-input
							v-model="scope.row.sort"
							placeholder=""
							onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
							@keyup.enter.native="postSort(scope.row.sort, scope.row.image_id)"
							@blur="postSort(scope.row.sort, scope.row.image_id)"
						></el-input>
					</template>
				</el-table-column>
				<el-table-column label="上下架" align="center">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1" @change="upDown($event, scope.row.factory_id, scope.row.image_id)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="280">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="showDialog(1, scope.$index)">编辑</el-button>
						<el-button type="danger" size="mini" @click="del(scope.row.factory_id, scope.row.image_id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages"><el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination></div>
		</el-card>
	</div>
</template>

<script>
import ImgPopover from '@/components/ImgPopover';
import singularFabric from '@/components/layer-dialog/singularFabric.vue';
import manyFabric from '@/components/layer-dialog/manyFabric.vue';
export default {
	name:"factory_fabric",
	components: {
		ImgPopover,
		singularFabric,
		manyFabric
	},
	data() {
		return {
			factory_id: localStorage.getItem('factory_id') == 'null' ? '':localStorage.getItem('factory_id'),
			fabricList: [], // 用户列表
			total: 0,
			totalData: 0, 
			page: 0,
			batchFactoryId: '',
			batchImageId: [],
			searchOption: [
                {
                value: 0,
                label: "工厂ID",
                }
            ],
			classSelect:"",
			selectContent:""
		};
	},
	methods: {
		// 初始化列表
		init(e) {
			this.page = e;
			let data = {
				page: e - 1 ? e - 1 : 0,
				limit: 10,
				factory_id: this.factory_id,
				type: 3,
				order_by:'sort'
			};

			let id = this.$route.query.id;
			if (id != undefined) {
				data.factory_id = id;
				this.factory_id = id;
			}
			if(this.classSelect == 0 && !id && !this.factory_id){
				data.factory_id = this.selectContent;
			}
			this.$http(this.$ApiList.FactoryImageList, data).then(res => {
				this.fabricList = res.datas.data;
				this.total = res.datas.count;
			});
		},
		// 删除
		del(factory_id, image_id) {
			this.$confirm('此操作将永久删除, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					//return;
					let data = {
						factory_id: factory_id,
						image_id: image_id
					};
					this.$http(this.$ApiList.FactoryImageDel, data).then(res => {
						if (res.code == 200) {
							this.$message({
								message: '删除成功',
								type: 'success'
							});
							this.init(this.page)
						}
					});
				})
				.catch(() => {});
		},
		// 批量选择
		batchSelect(e){
			if(e.length){
				e.forEach(item => {
					this.batchFactoryId = item.factory_id
					this.batchImageId.push(item.image_id)
				})
			}else{
				this.batchFactoryId = ''
				this.batchImageId = []
			}
		},
		// 批量删除
		batchDel(){
			if(!this.batchImageId.length){
				return this.$layer.msg('请选择需要删除的项')
			}
			this.$confirm('此操作将永久删除, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				let data = {
					factory_id: this.batchFactoryId,
					image_id: this.batchImageId.join(',')
				};
				this.$http(this.$ApiList.FactoryImageDel, data).then(res => {
					this.$message({
						message: '删除成功',
						type: 'success'
					});
					this.init(this.page)
				});
			}).catch(() => {});
		},
		// 控制Dialog显示
		showDialog(type, index) {
			if (type == 0) {
				this.$layer.iframe({
					title: '添加面料',
					maxmin: true,
					area: ['50%', '60%'],
					content: {
						content: singularFabric, //传递的组件对象
						parent: this, //当前的vue对象
						data: {
							info: this.fabricList[index],
							type: type
						} //props
					}
				});
			} else if (type == 1) {
				this.$layer.iframe({
					title: '编辑面料',
					maxmin: true,
					area: ['50%', '60%'],
					content: {
						content: singularFabric, //传递的组件对象
						parent: this, //当前的vue对象
						data: {
							info: this.fabricList[index],
							type: type
						} //props
					}
				});
			} else if (type == 2) {
				this.$layer.iframe({
					title: '添加面料',
					maxmin: true,
					area: ['50%', '60%'],
					content: {
						content: manyFabric, //传递的组件对象
						parent: this, //当前的vue对象
						data: {} //props
					}
				});
			}
		},
		// 上下架
		upDown(e, factory_id, image_id) {
			let data = {
				factory_id: factory_id,
				image_id: image_id,
				status: e
			};
			this.$http(this.$ApiList.FactoryImageDown, data).then(res => {
				if (res.code == 200) {
					this.$layer.msg('操作成功');
				}
			});
		},
		handleEdit(index, row) {
			console.log(index, row);
		},
		refreshPage() {
			this.page = 1;
			this.classSelect = "";
			this.selectContent = "";
			this.init();
		},
		postSort(sort, image_id) {
			if(sort < 0 || sort == ""){
				this.$layer.msg('请输入正确的排序');
				return
			}
			let data = {
				factory_id:this.factory_id,
				image_id:image_id,
				sort:sort
			}
		
			this.$http(this.$ApiList.FactoryImageSort, data).then(res => {
				this.init()
			});
		},
		goSearch(classSelect, selectContent) {
            this.classSelect = classSelect;
            this.selectContent = selectContent;
            this.init(1);
        },
	},
	created() {
		this.init();
	}
};
</script>
<style lang="scss" scoped>

</style>
